<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>套餐</title>
    <link rel="stylesheet" href="../css/normalize.min.css">
    <link rel="stylesheet" href="../css/styleforvip.css">
    <script src="../js/jquery.min.js" charset="utf-8"></script>

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />
    <link href="../showstatic/css/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../showstatic/js/phone.js" ></script>
    <script type="text/javascript" src="../showstatic/js/layer-v3.0.3/layer/mobile/layer.js"></script>

</head>

<body>
<header class="header">
    <a href="javascript:history.back(-1)" class="fa fa-angle-left"></a>
    <span class="names">套餐选购</span>
</header>
<div class="mainbox">
    <div style="text-align: center;line-height: 40px;font-size: 50px;color: #b3ee6b;">
        蜗牛电影套餐选购
    </div>

    <div class='pricing pricing-palden' style="position: relative;top :50px">
        <div class='pricing-item'>
            <div class='pricing-deco'>
                <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
                     preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
                     xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
                        <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A;	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
                              fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A;	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
                          fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A;	H42.401L43.415,98.342z'
                          fill='#FFFFFF' opacity='0.7'></path>
                    <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A;	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
                          fill='#FFFFFF'></path>
                    </svg>
                <div class='pricing-price' >
                    <span class='pricing-currency'>¥</span>
                    29
                    <span class='pricing-period'>/ 年</span>
                </div>
                <h3 class='pricing-title' id="vname1">普通版</h3>
            </div>
            <ul class='pricing-feature-list'>
                <li class='pricing-feature'>享受购票<span id="vdiscount1"></span>折优惠</li>
            </ul>
            <button class='pricing-action'  id="29"  onclick="pay(this)">
                立即购买
            </button>
        </div>
        <div class='pricing-item pricing__item--featured'>
            <div class='pricing-deco'>
                <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
                     preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
                     xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
                        <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A;	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
                              fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A;	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
                          fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A;	H42.401L43.415,98.342z'
                          fill='#FFFFFF' opacity='0.7'></path>
                    <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A;	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
                          fill='#FFFFFF'></path>
                    </svg>
                <div class='pricing-price'>
                    <span class='pricing-currency'>¥</span>
                    39
                    <span class='pricing-period'>/ 年</span>
                </div>
                <h3 class='pricing-title' id="vname2"></h3>
            </div>
            <ul class='pricing-feature-list'>
                <li class='pricing-feature'>享受购票<span id="vdiscount2"></span>折优惠</li>
            </ul>
            <button class='pricing-action' id="39" onclick="pay(this)">立即购买</button>
        </div>
        <div class='pricing-item'>
            <div class='pricing-deco'>
                <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1'
                     preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve'
                     xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'>
                        <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A;	c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z'
                              fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A;	c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z'
                          fill='#FFFFFF' opacity='0.6'></path>
                    <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A;	H42.401L43.415,98.342z'
                          fill='#FFFFFF' opacity='0.7'></path>
                    <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A;	c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z'
                          fill='#FFFFFF'></path>
                    </svg>
                <div class='pricing-price'>
                    <span class='pricing-currency'>¥</span>
                    59
                    <span class='pricing-period'>/ 年</span>
                </div>
                <h3 class='pricing-title'id="vname3"></h3>
            </div>
            <ul class='pricing-feature-list'>
                <li class='pricing-feature'>享受购票<span id="vdiscount3"></span>折优惠</li>
            </ul>
            <button class='pricing-action' id="59"  onclick="pay(this)">立即购买</button>
        </div>
    </div>
    <div>

    </div>
</div>



<script type="text/javascript">

    $(function () {
        $.ajax({
            url:'/vip/showVip',
            success:function(data) {
                $("#vname1").text(data[0].vname);
                $("#vname2").text(data[1].vname);
                $("#vname3").text(data[2].vname);

                $("#29").attr('name',data[0].id);
                $("#39").attr('name',data[1].id);
                $("#59").attr('name',data[2].id);

                $("#vdiscount1").text(data[0].vdiscount*10);
                $("#vdiscount2").text(data[1].vdiscount*10);
                $("#vdiscount3").text(data[2].vdiscount*10);
            }
        });
    })

    function getNum() {

        var num = "";
        for (var i = 0; i < 6; i++) //j位随机数，用以加在时间戳后面。
        {
            num += Math.floor(Math.random() * 10);
        }
        num = new Date().getTime() + num;

        return num;
    }

    function pay(node) {
        var b = $(node);
        var price1 = b.attr('id');
        var price = parseInt(price1);
        var vipId = parseInt(b.attr('name'));
        console.log(price+''+vipId)
        //alert(vipId);
        var form = $("<form method='post'></form>");
        form.attr("action","/zilanxuan/pay");
        var input1 = $("<input type='hidden'>").attr("name", "tradeNo").val(getNum()); //新订单号
        var input2 = $("<input type='hidden'>").attr("name", "subject").val("套餐消费");
        var input3 = $("<input type='hidden'>").attr("name", "totalAmount").val(price);  //订单金额
        var input4 = $("<input type='hidden'>").attr("name", "vipId").val(vipId);  //订单金额
        form.append(input1);
        form.append(input2);
        form.append(input3);
        form.append(input4);
        $("body").append($(form));
        form.submit();
    }


</script>
</body>
</html>